<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科技产品订单中心</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

        :root {
            --neon-pink: #ff2a6d;
            --neon-blue: #05d9e8;
            --neon-purple: #d300c5;
            --neon-green: #00ff9d;
            --dark-bg: #0d0221;
            --darker-bg: #05010e;
        }

        body {
            font-family: 'Share Tech Mono', monospace;
            margin: 0;
            padding: 20px;
            background-color: var(--dark-bg);
            color: var(--neon-blue);
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                    linear-gradient(rgba(5, 217, 232, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(5, 217, 232, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            z-index: -1;
            pointer-events: none;
        }

        body::after {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                    linear-gradient(transparent 65%, rgba(13, 2, 33, 0.95) 95%),
                    linear-gradient(90deg, var(--neon-pink), var(--neon-blue), var(--neon-purple));
            background-size: 100% 100%, 200% 200%;
            animation: gradient 15s ease infinite;
            z-index: -2;
            opacity: 0.15;
            pointer-events: none;
        }

        @keyframes gradient {
            0% { background-position: 0% 0%, 0% 50%; }
            50% { background-position: 0% 0%, 100% 50%; }
            100% { background-position: 0% 0%, 0% 50%; }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: rgba(13, 2, 33, 0.85);
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 15px var(--neon-purple);
            border: 1px solid var(--neon-blue);
            position: relative;
            overflow: hidden;
        }

        .container::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 2px solid var(--neon-pink);
            border-radius: 8px;
            animation: glitch 5s linear infinite;
            opacity: 0.3;
            pointer-events: none;
        }

        @keyframes glitch {
            0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
            5% { clip-path: polygon(0 5%, 100% 15%, 100% 95%, 0 85%); }
            10% { clip-path: polygon(0 15%, 100% 5%, 100% 85%, 0 95%); }
            15% { clip-path: polygon(0 25%, 100% 25%, 100% 75%, 0 75%); }
            20% { clip-path: polygon(0 35%, 100% 45%, 100% 65%, 0 55%); }
            25% { clip-path: polygon(0 45%, 100% 35%, 100% 55%, 0 65%); }
            30% { clip-path: polygon(0 55%, 100% 65%, 100% 45%, 0 35%); }
            35% { clip-path: polygon(0 65%, 100% 55%, 100% 35%, 0 45%); }
            40% { clip-path: polygon(0 75%, 100% 75%, 100% 25%, 0 25%); }
            45% { clip-path: polygon(0 85%, 100% 95%, 100% 5%, 0 15%); }
        }

        h1 {
            color: var(--neon-green);
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 20px;
            text-shadow: 0 0 10px var(--neon-green);
            animation: neon-flicker 2s infinite alternate;
            position: relative;
        }

        @keyframes neon-flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                text-shadow: 0 0 10px var(--neon-green);
            }
            20%, 24%, 55% {
                text-shadow: 0 0 5px var(--neon-green),
                0 0 10px var(--neon-green),
                0 0 15px var(--neon-green);
            }
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            border: 1px solid var(--neon-blue);
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid rgba(5, 217, 232, 0.3);
        }

        th {
            background-color: rgba(5, 217, 232, 0.2);
            color: var(--neon-blue);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        tr:hover {
            background-color: rgba(255, 42, 109, 0.1);
        }

        .status {
            padding: 5px 10px;
            border-radius: 3px;
            font-weight: bold;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 0.9; }
            50% { opacity: 1; }
            100% { opacity: 0.9; }
        }

        .completed {
            background-color: var(--neon-green);
            color: var(--darker-bg);
            box-shadow: 0 0 5px var(--neon-green);
        }

        .processing {
            background-color: var(--neon-blue);
            color: var(--darker-bg);
            box-shadow: 0 0 5px var(--neon-blue);
        }

        .shipped {
            background-color: var(--neon-purple);
            color: white;
            box-shadow: 0 0 5px var(--neon-purple);
        }

        .scanlines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                    to bottom,
                    transparent 95%,
                    rgba(255, 255, 255, 0.05) 96%
            );
            background-size: 100% 4px;
            z-index: -1;
            pointer-events: none;
            animation: scanline 8s linear infinite;
        }

        @keyframes scanline {
            0% { background-position: 0 0; }
            100% { background-position: 0 100%; }
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }

            th, td {
                padding: 8px;
                font-size: 0.9em;
            }

            h1 {
                font-size: 1.8em;
            }
        }
    </style>
</head>
<body>
<div class="scanlines"></div>

<div class="container">
    <h1>科技产品订单中心</h1>
    <div id="ordersList">
        <table>
            <thead>
            <tr>
                <th>订单编号</th>
                <th>产品名称</th>
                <th>客户</th>
                <th>数量</th>
                <th>总价</th>
                <th>订单日期</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody id="ordersTableBody">
            </tbody>
        </table>
    </div>
</div>

<script>
    window.onload = function() {
        const mockOrders = [
            {
                orderNumber: "ORD-3A8B2D1F",
                productId: 101,
                productName: "智能手机 Pro",
                customerName: "张伟",
                quantity: 1,
                totalAmount: 8999.00,
                orderDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
                status: "已完成"
            },
            {
                orderNumber: "ORD-7C4E9A2D",
                productId: 205,
                productName: "无线耳机 Elite",
                customerName: "李娜",
                quantity: 2,
                totalAmount: 2598.00,
                orderDate: new Date(Date.now() - 5 * 60 * 60 * 1000),
                status: "处理中"
            },
            {
                orderNumber: "ORD-1F5B9E3C",
                productId: 308,
                productName: "智能手表 X",
                customerName: "王强",
                quantity: 1,
                totalAmount: 2499.00,
                orderDate: new Date(Date.now() - 24 * 60 * 60 * 1000),
                status: "已发货"
            },
            {
                orderNumber: "ORD-6D2A8F4B",
                productId: 412,
                productName: "游戏笔记本",
                customerName: "赵敏",
                quantity: 1,
                totalAmount: 12999.00,
                orderDate: new Date(Date.now() - 3 * 60 * 60 * 1000),
                status: "处理中"
            },
            {
                orderNumber: "ORD-9E3B7C1D",
                productId: 516,
                productName: "4K显示器",
                customerName: "刘洋",
                quantity: 3,
                totalAmount: 8997.00,
                orderDate: new Date(Date.now() - 8 * 60 * 60 * 1000),
                status: "已发货"
            }
        ];

        renderOrders(mockOrders);

    };

    function renderOrders(orders) {
        const tableBody = document.getElementById('ordersTableBody');
        tableBody.innerHTML = '';

        orders.forEach(order => {
            const row = document.createElement('tr');

            let statusClass = '';
            if (order.status === '已完成') {
                statusClass = 'completed';
            } else if (order.status === '处理中') {
                statusClass = 'processing';
            } else if (order.status === '已发货') {
                statusClass = 'shipped';
            }

            const orderDate = order.orderDate.toLocaleString();

            row.innerHTML = `
                    <td>${order.orderNumber}</td>
                    <td>${order.productName}</td>
                    <td>${order.customerName}</td>
                    <td>${order.quantity}</td>
                    <td>¥${order.totalAmount.toFixed(2)}</td>
                    <td>${orderDate}</td>
                    <td><span class="status ${statusClass}">${order.status}</span></td>
                `;

            tableBody.appendChild(row);
        });
    }

    function fetchOrders() {
        fetch('/api/orders')
            .then(response => response.json())
            .then(data => {
                renderOrders(data);
            })
            .catch(error => {
                console.error('获取订单数据时出错:', error);
                console.log('使用模拟数据作为回退');
                window.onload();
            });
    }
</script>
</body>
</html>